<template>
  <div class="header">
    <!-- 头 -->
    <div class="head">
      <div class="stati">
        <span>
          <img src="https://s1.ax1x.com/2022/10/25/xR4r36.png" alt="" />
          统计</span
        >
        <span class="stati-right">
          <img src="https://s1.ax1x.com/2022/10/29/x5TZjA.png" alt="" />
          下载报表
        </span>
      </div>
      <div class="Data">
        <div class="Data-left">
          <span  :class="{action : curr===1}" @click="curr=1">近7日</span>
          <span  :class="{action :curr===2}" @click="curr=2">近30日</span>
          <!-- 时间  -->
          <div class="block">
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </div>
        </div>
        <!-- 全部医院 -->
        <div class="Data-right">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <button>日</button>
          <button>周</button>
        </div>
      </div>
    </div>
    <!-- 图表 -->
    <div class="Ech" ref="chart">
    </div>
    <!-- 底部 -->
    <div class="foolter">
      <div class="consun">
        <p>会诊统计</p>
        <div class="consun-Ltth">
          <el-checkbox v-model="consultation.forHelp">求诊量</el-checkbox>
          <div class="yellow"></div>
          <el-checkbox  v-model="consultation.triage">分诊量</el-checkbox>
          <div class="blue"></div>
          <el-checkbox  v-model="consultation.refusedTo">拒绝量</el-checkbox>
          <div class="red"></div>
          <el-checkbox  v-model="consultation.consultation">会诊量</el-checkbox>
          <div class="Hu"></div>
        </div>
      </div>
      <div class="stati">
        <p>转诊统计</p>
        <div class="consun-Ltth">
          <el-checkbox v-model="referral.toApplyFor">申请量</el-checkbox>
          <div class="yellow"></div>
          <el-checkbox v-model="referral.audit">审核量</el-checkbox>
          <div class="blue"></div>
          <el-checkbox v-model="referral.refusedTo">拒绝量</el-checkbox>
          <div class="red"></div>
          <el-checkbox v-model="referral.seeADoctor">就诊量</el-checkbox>
          <div class="Hu"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "statistical",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 会诊统计
      consultation:{
        forHelp:true,
        triage:true,
        refusedTo:true,
        consultation:true
      },
      // 转诊统计
      referral:{
        toApplyFor:true,
        audit:true,
        refusedTo:true,
        seeADoctor:true
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        },  ],
        value: '',
        curr:1
      }
    
  },
  mounted(){
    this.getEchartData();
    
  },
  methods:{
    getEchartData(){
        const chart = this.$refs.chart;
        var myChart = this.$echarts.init(chart);
        let option;
        option = {
  tooltip: {
    trigger: 'axis'
  },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1', '2', '3', '4', '5', '6', '7']
  },
  yAxis: {
    type: 'value'
  },
  //  线
  series: [
    {
      name: '求诊量',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
myChart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.action{
  color: #199ed8;
}
img {
  vertical-align: middle;
}
.header {
  width: 1340px;
  height: 300px;
  box-sizing: border-box;
  padding-top: 20px;
  .head {
    height: 80px;
    .stati {
      height: 30px;
      margin-left: 130px;
      .stati-right {
        float: right;
      }
    }
  }
  .Data {
    height: 40px;
    margin: 8px 0 0 130px;
    background: #f2f2f2;
    .Data-left {
      float: left;
      width: 70%;
      height: 40px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20px;
      span {
        margin-left: 20px;
        font-size: 14px;
      }
      span:nth-child(2){
        margin-right: 20px;
      }
      .last {
        color: #000;
        margin-right: 20px;
      }
    }
    .Data-right {
      width: 30%;
      height: 40px;
      display: flex;
      align-items: center;
      button{
        margin-left: 10px;
        background: #f8f8f8;
        width: 42px;
        height:37px;
        border: 1px solid #cccccc;
        color: #333333;
      }
    }
  }
}
.Ech {
  width:1250px;
  height: 300px;
  margin-left: 100px;
}
.foolter {
  width:1280px;
  height: 300px;
  margin-left: 130px;
  .consun{
    height: 50px;
    display: flex;
    align-items: center;
    .consun-Ltth{
      height: 40px;
      display: flex;
      align-items: center;
      .el-checkbox{
        margin: 0 15px 0 66px ;
      }
      .yellow{
        width: 12px;
        height: 10px;
        background: yellow;
      }
      .blue{
        width: 12px;
        height: 10px;
        background: blue;
      }
      .red{
        width: 12px;
        height: 10px;
        background: red;
      }
      .Hu{
        width: 12px;
        height: 10px;
        background: #CCC;
      }
    }
  }
  .stati{
    height: 50px;
    display: flex;
    align-items: center;
    .consun-Ltth{
      height: 40px;
      display: flex;
      align-items: center;
      .el-checkbox{
        margin: 0 15px 0 66px ;
      }
      .yellow{
        width: 12px;
        height: 10px;
        background: yellow;
      }
      .blue{
        width: 12px;
        height: 10px;
        background: blue;
      }
      .red{
        width: 12px;
        height: 10px;
        background: red;
      }
      .Hu{
        width: 12px;
        height: 10px;
        background: #CCC;
      }
    }
  }
}
</style>